<template>
  <el-dialog  draggable overflow v-model="visible" :title="titleMap[mode]" :width="1024" destroy-on-close @closed="$emit('closed')">

    <el-form :model="form" :rules="rules" ref="dialogForm1" label-width="70px" label-position="top" class="formhead">
      <el-row style="display: flex;align-items: center;">
        <el-col :span="16">
          <span style="font-size: 25px;">打样申请</span>
        </el-col>
        <el-col :span="5">
          <span style="font-size: 25px;"> 待打样： <span style="color:red">{{ countApply }}</span></span>
        </el-col>
        <el-col :span="3">
          <el-form-item label="编号" prop="code" class="backgroudBlue">
            <el-input label="编号" v-model="form.code" readonly placeholder="自动生成"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <sk-tabs type="border-card" v-loading="digloading">
      <el-tab-pane ref="tab" label="基础信息">
        <el-form :model="form" :rules="rules" ref="dialogForm" label-width="70px" label-position="right">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="12" align="客户">
                  <el-form-item label="客户" prop="customer_id">
                    <skAutoChoose v-model="form.customer.name" :params="[{ 'name': { type: 'nlr', value: 'YZ' } }]"
                      :name="'customer'" :assign="form">
                    </skAutoChoose>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="门市留样" prop="remark">
                    <el-checkbox v-model="form.shopneed" label="勾选后，地址默认门市部" :true-label="1" :false-label="0" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="寄样地址" prop="address">
                    <el-input v-model="form.address" :disabled="defaultAddress == form.address" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-descriptions :column="2" border label-align="right">
                    <el-descriptions-item>
                      <template #label>备注</template>
                      <el-col :span="24">
                        <el-form-item label="手感" prop="forhand">
                          <el-input v-model="form.forhand"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="颜色" prop="forcolor">
                          <el-input v-model="form.forcolor"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="用途" prop="usefor">
                          <el-input v-model="form.usefor"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item label="其他" prop="remark">
                          <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-descriptions-item>
                  </el-descriptions>
                </el-col>
              </el-row>
              <sc-VxeTable ref="save" :gridEvts="gridEvts" :data="form.details" :gridOps="gridOps" :height="300"
                :tablecode="'pro_colorApply_save'">
              </sc-VxeTable>
            </el-col>
            <el-col :span="11" :offset="1">
              <sk-upload v-model="form.attachments" :limit="10" draggable tip="单个文件不要超过10M,请上传图像格式文件">
              </sk-upload>
            </el-col>
          </el-row>
        </el-form>
      </el-tab-pane>
    </sk-tabs>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
import skDicSelect from "@/components/skDicSelect";
import skAutoChoose from "@/components/skAutoChoose";
export default {
  emits: ["success", "closed"],
  components: { skAutoChoose, skDicSelect, },
  data() {
    return {
      mode: "add",
      dialog: { save: false },
      digloading: false,
      countApply: 0,
      ARBalance: 0,
      credit_limit: 0,
      gridEvts: {

      },
      titleMap: {
        add: "新增",
        edit: "编辑",
      },
      defaultAddress: "寄样门市部",
      newAddress: "",
      form: {
        id: "",
        address: "",
        customer: { name: "" },
        details: [],
        shopneed: 1,
        attachments: [],
      },
      rules: {
        address: { required: true, message: "地址必填" },
        customer_id: { required: true, message: "请选择客户" },
      },
      visible: false,
      isSaveing: false,
      gridOps: {
        height: 300,
        columns: [
          {
            field: "material.name",
            event: {
              select: ({ e, row }) => {
                row["material"] = e;
              },
            },
          },
        ],
      },
    };
  },
  watch: {
    "form.shopneed": {
      handler(data) {
        if (this.newAddress == "" && this.form.address != "" && this.form.address != this.defaultAddress) {
          this.newAddress = this.form.address;
        }
        if (data) {
          this.form.address = this.defaultAddress;
        }
        else {
          this.form.address = this.newAddress;
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.LoadCountApply();
  },
  methods: {
    LoadCountApply() {
      this.$API.pro.colorApply.countApply.get().then((res) => {
        if (res.code == 200) {
          this.countApply = res.data
        }
      }).finally(() => {
        this.digloading = false;
      });
    },
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      return this;
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          this.$API.pro.colorApply.save.post(this.form).then((res) => {
            if (res.code == 200) {
              this.$emit("success", this.form, this.mode);
              this.visible = false;
              this.$message.success("操作成功");
            }
          })
            .finally(() => {
              this.isSaveing = false;
            })
        }
      });
    },
    getInfo(id) {
      this.digloading = true;
      this.$API.pro.colorApply.info.get({
        filter: [{ id: id }],
      }).then((res) => {
        if (res.code == 200) {
          this.form = res.data
        }
      }).finally(() => {
        this.digloading = false;
      });

    },
    //表单注入数据
    setData(data) {
      this.getInfo(data.main_id);
    },
  },
};
</script>
